/*
  学习目标：常见的受控组件
  1. value或checked属性受state的控制
  2. onChange配合setState修改表单元素的值
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    username: '',
    desc: '',
    city: '2',
    isSingle: true,
  };

  handleChangeName = (e) => {
    // 快捷键: sst
    this.setState({ username: e.target.value });
  };

  handleChangeDes = (e) => {
    this.setState({ desc: e.target.value });
  };

  handleChangeCity = (e) => {
    console.log('e.target.value  ----->  ', e.target.value);
    this.setState({ city: e.target.value });
  };

  handleChangeSingle = (e) => {
    this.setState({ isSingle: e.target.checked });
  };

  render() {
    // const {username, city}  = this.state;
    // 快捷键: cs
    const { username, desc, city, isSingle } = this.state;
    return (
      <div>
        姓名：
        <input type="text" onChange={this.handleChangeName} value={username} />
        <br />
        描述：
        <textarea value={desc} onChange={this.handleChangeDes}></textarea>
        <br />
        城市：
        <select value={city} onChange={this.handleChangeCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input
          onChange={this.handleChangeSingle}
          checked={isSingle}
          type="checkbox"
        />
      </div>
    );
  }
}
